﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Netflix - oData</title>
    <link rel="stylesheet" href="styles/style.css" />
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="scripts/datajs-0.0.3.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.tmpl.js" ></script>
    <script type="text/javascript" src="scripts/jquery.raty.js"></script>
    <script type="text/javascript" src="scripts/jquery.corners.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.center.js"></script>
    <script type="text/javascript" src="scripts/Netflix.js"></script>
    <script type="text/javascript">
        $(domReady);
    </script>
</head>
<body id="pageBody">
    <table width="900px;" align="center">
        <tr>
            <td width="177" align="left">
                <img align="left" src="/images/netflix_logo.gif" />
            </td>
            <td align="left" class="netFlixHeader">
                Movie Catalog
            </td>
        </tr>
    </table>
    
        <table width="900px;" align="center" cellspacing=0 cellpadding=5 style="border:1px solid lightblue;">
            <tr>
                <td colspan="3" align="center" style="border-bottom:1px solid lightblue;font-size: 16px; font-weight: bold">
                    Search Movies
                </td>
            </tr>
            <tr>
                <td width="300">
                    <div style="padding: 2px; font-weight: bold; font-size: 14px;">
                        Genre</div>
                    <div style="padding: 2px;">
                        <select style="width: 250px" id="Genre" name="Genre" onchange="BrowseByGenres()">
                            <option>Loading</option>
                        </select>
                    </div>
                    <div style="padding-left: 2px;">
                        <span style="color: gray"><i>Browse Movies by Genre</i></span>
                    </div>
                </td>
                <td width="300">
                    <div style="padding: 2px; font-weight: bold; font-size: 14px;">
                        Language</div>
                    <div style="padding: 2px;">
                        <select style="width: 250px" id="Language" name="Language" onchange="BrowseByLanguages()">
                            <option>Loading</option>
                        </select>
                    </div>
                    <div style="padding-left: 2px;">
                        <span style="color: gray"><i>Browse Movies by Language</i></span>
                    </div>
                </td>
                <td width="300">
                    <div style="padding: 2px; font-weight: bold; font-size: 14px;">
                        Name</div>
                    <div style="padding: 2px;">
                        <input type="text" name="Name" id="txtName" /><input type="button" value="Search"
                            onclick="BrowseByName()" />
                    </div>
                    <div style="padding-left: 2px;">
                        <span style="color: gray"><i>Browse Movies by Name</i></span>
                    </div>
                </td>
            </tr>
            <tr >
                <td width="50px;" style="border-top:1px solid lightblue;font-weight: bold; font-size: 16px;" colspan=3>
                    Browse
                    <a href="javascript:BrowseMovies()">Movies</a> | <a href="javascript:BrowseSeasons()">Seasons</a>
                </td>
            </tr>
        </table>
    <div id="Loading" align="center" style="display: none">
        <img id="imgLoading" src="images/loading.gif" />
        <br />
        Loading Movies...
    </div>
    <div align="left" style="margin:auto;width:900px;padding:15px;" id="listingmessages">
        <span>Movie listing by </span>
        <strong>
            <span id="criteria" />
        </strong>
        - 
        <strong>    
            <span id="criteriaValue" />
        </strong>
        <div id="pager" style="float:right" align="center">
            <span><input type="button" onclick="PrevPage()" id="btnPrev" value="Prev"/></span>    
            <span id="pagenumber"></span>
            <span><input type="button" onclick="NextPage()" id="btnNext" value="Next"/></span>
        </div>
    </div>
    <br />
    
    <div id="movieListingContainer"></div>
    <!--<table  width="900px;" align="center" cellspacing=0 cellpadding=3 id="movieListingContainer">
    </table>
    -->
</body>
</html>
